<template>
    <div class="product_detail">
        <div class="product_detail_scroll" @scroll="checkScrollPosition">
            <van-nav-bar title="商品详情" left-arrow @click-left="handleLeft"></van-nav-bar>
            <!-- 浮动导航栏 -->
            <div class="floating-nav" v-if="showFloatingNav" :style="{ zIndex: showTop ? 0 : 999 }">
                <ul>
                    <li @click="scrollToElement('product_detail_top')"
                        :class="{ 'red-text': activeNavItem == 'product_detail_top' }">
                        商品
                    </li>
                    <li @click="scrollToElement('product_detail_title--content')" :class="{
                        'red-text': activeNavItem == 'product_detail_title--content',
                    }">
                        合作信息
                    </li>
                    <li @click="scrollToElement('product_detail_bottom')"
                        :class="{ 'red-text': activeNavItem == 'product_detail_bottom' }">
                        商品资质
                    </li>
                    <li @click="scrollToElement('brand_qualification')"
                        :class="{ 'red-text': activeNavItem == 'brand_qualification' }">
                        品牌资质
                    </li>
                </ul>
            </div>
            <div class="product_detail_top" id="product_detail_top">
                <div class="product_detail_top_img">
                    <van-swipe lazy-render ref="ticketSwiper" v-if="realSrcList.length">
                        <van-swipe-item v-for="(image, index) in realSrcList" :key="image">
                            <van-image class="product_detail_top-image" :src="image" @click="enlargeImage(index)" />
                        </van-swipe-item>
                    </van-swipe>
                    <van-image :src="errImg" v-if="!realSrcList.length"> </van-image>
                </div>
                <div class="product_detail_top_details">
                    <div class="info">
                        <span class="price" v-if="hmMechanismsList.cooperationMode == '分佣'">￥{{
                            hmMechanismsList.price }}</span>
                        <span class="price" v-if="hmMechanismsList.cooperationMode == '供货'">￥{{
                            hmMechanismsList.costPrice }}</span>
                        <div class="costPrice" v-if="hmMechanismsList.cooperationMode == '分佣'">
                            成本：{{ hmMechanismsList.costPrice }}
                        </div>

                        <span class="commission" v-if="hmMechanismsList.cooperationMode == '分佣'">佣{{
                            hmMechanismsList.commission + "%" }}</span>
                    </div>
                    <span class="liveStreamingMechanism">机制：{{ hmMechanismsList.liveStreamingMechanism }}</span>
                    <div class="styleName">{{ detailInfo.styleName }} <div class="liveStreamingMechanisms"
                            v-if="hmMechanismsList1.cooperationMode"> 多机制
                        </div>
                    </div>
                    <div class="brand">
                        <span>类目名：{{ detailInfo.productCategoryName }}</span>
                    </div>
                    <div class="deails-size">
                        <div class="brand">
                            <span>品牌名：{{ detailInfo.brandName }}</span>
                        </div>
                    </div>
                    <div class="styleCode">商品编码：{{ detailInfo.id }}</div>
                    <div class="styleCode">69码：{{ detailInfo.styleCode }}</div>
                    <div class="deails-size">
                        <div class="brand">
                            <span>规格/材质：{{
                                detailInfo.specs
                            }}</span>
                        </div>
                    </div>
                    <div class="merchant-style">
                        <div class="merchant-style-size">
                            供应商名称：{{ detailInfo.supplierName }}
                        </div>
                        <div class="merchant-style-btn" :style="{
                            background:
                                detailInfo.sellStatus == '已签署' ? '#E7FDEE' : '#EFEFEF',
                            color:
                                detailInfo.sellStatus == '已签署' ? '#19D11B' : '#B8BECA',
                        }">
                            {{ detailInfo.sellStatus }}
                        </div>
                        <div class="launch">
                            {{ detailInfo.coreName }}
                        </div>
                        <!-- <div class="merchant-style-btn1">有AB货</div> -->
                    </div>
                </div>
            </div>

            <div class="product_detail_title--heng"></div>
            <div class="product_detail_title--content" id="product_detail_title--content">
                <div class="product_detail_title-content-size">合作信息</div>
                <div class="mechanism_title">机制一：</div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">合作方式：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList.cooperationMode }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">直播机制：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList.liveStreamingMechanism }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">成本价：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList.costPrice }}
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">售价：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList.price }}
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">佣金：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList.commission }}%
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">补充佣金：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList.brokerage }}%
                    </div>
                </div>

                <div v-if="hmMechanismsList1.cooperationMode">
                    <div class="mechanism_title">机制二：</div>
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">合作方式：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ hmMechanismsList1.cooperationMode }}
                        </div>
                    </div>
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">直播机制：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ hmMechanismsList1.liveStreamingMechanism }}
                        </div>
                    </div>
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">成本价：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ hmMechanismsList1.costPrice }}
                        </div>
                    </div>
                    <div class="product_detail_title-content-info" v-if="hmMechanismsList1.cooperationMode == '分佣'">
                        <div class="product_detail_title-content-info-name">售价：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ hmMechanismsList1.price }}
                        </div>
                    </div>
                    <div class="product_detail_title-content-info" v-if="hmMechanismsList1.cooperationMode == '分佣'">
                        <div class="product_detail_title-content-info-name">佣金：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ hmMechanismsList1.commission }}%
                        </div>
                    </div>
                    <div class="product_detail_title-content-info" v-if="hmMechanismsList1.cooperationMode == '分佣'">
                        <div class="product_detail_title-content-info-name">补充佣金：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ hmMechanismsList1.brokerage }}%
                        </div>
                    </div>
                </div>

                <div v-if="hmMechanismsList2.cooperationMode">
                    <div class="mechanism_title">机制三：</div>
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">合作方式：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ hmMechanismsList2.cooperationMode }}
                        </div>
                    </div>
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">直播机制：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ hmMechanismsList2.liveStreamingMechanism }}
                        </div>
                    </div>
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">成本价：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ hmMechanismsList2.costPrice }}
                        </div>
                    </div>
                    <div class="product_detail_title-content-info" v-if="hmMechanismsList2.cooperationMode == '分佣'">
                        <div class="product_detail_title-content-info-name">售价：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ hmMechanismsList2.price }}
                        </div>
                    </div>
                    <div class="product_detail_title-content-info" v-if="hmMechanismsList2.cooperationMode == '分佣'">
                        <div class="product_detail_title-content-info-name">佣金：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ hmMechanismsList2.commission }}%
                        </div>
                    </div>
                    <div class="product_detail_title-content-info" v-if="hmMechanismsList2.cooperationMode == '分佣'">
                        <div class="product_detail_title-content-info-name">补充佣金：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ hmMechanismsList2.brokerage }}%
                        </div>
                    </div>
                </div>


                <div class="product_detail_title-content-info" style="margin-top: 35px">
                    <div class="product_detail_title-content-info-name">贸易方式：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ detailInfo.tradeMode }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">招商部：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ detailInfo.recruiterDept }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">招商员：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ detailInfo.recruiter }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">走仓：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ detailInfo.warehouse ? '是' : '否' }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name"
                        style="white-space: nowrap; padding-right: 40px">对接群名：
                    </div>
                    <div class="product_detail_title-content-info-content" style="text-align: end">
                        {{ detailInfo.groupName }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name"
                        style="white-space: nowrap; padding-right: 50px">
                        卖点：
                    </div>
                    <div class="product_detail_title-content-info-content" style="text-align: end">
                        {{ detailInfo.sellingPoints }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">平台扣点：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ detailInfo.tax }}%
                    </div>
                </div>
            </div>

            <!-- 产品资质 -->
            <div class="product_detail_title--heng"></div>
            <div class="product_detail_bottom" id="product_detail_bottom">
                <div class="product_detail_title-content-size">商品资质</div>
                <span class="tilte">商品实拍</span>
                <div class="product_image">
                    <IsImgPdf v-for="(item, index) in realSrcList" :key="index" v-if="realSrcList.length" :url="item" />
                    <div v-if="!realSrcList.length">
                        <IsImgPdf url="" />
                    </div>
                </div>
                <span class="tilte">备案行政/许可证批件</span>
                <div class="product_image">
                    <IsImgPdf v-for="(item, index) in voucherImageList" :key="index" v-if="voucherImageList.length"
                        :url="item" />
                    <div v-if="!voucherImageList.length">
                        <IsImgPdf url="" />
                    </div>
                </div>
                <span class="tilte">其他资质</span>
                <div class="product_image">
                    <IsImgPdf v-for="(item, index) in otherImageList" :key="index" v-if="otherImageList.length"
                        :url="item" />
                    <div v-if="!otherImageList.length">
                        <IsImgPdf url="" />
                    </div>
                </div>
                <span class="tilte">营业执照</span>
                <div class="product_image">
                    <IsImgPdf v-if="detailInfo.businessImage" :url="detailInfo.businessImage" />
                    <div v-if="!detailInfo.businessImage">
                        <IsImgPdf url="" />
                    </div>
                </div>
                <span class="tilte" v-if="detailInfo.tradeMode == '进口'">进口货物/原材料报关单</span>
                <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                    <IsImgPdf v-for="(item, index) in customsDeclarationImageList" :key="index"
                        v-if="customsDeclarationImageList.length" :url="item" />
                    <div v-if="!customsDeclarationImageList.length">
                        <IsImgPdf url="" />
                    </div>
                </div>
                <span class="tilte" v-if="detailInfo.tradeMode == '进口'">进口产品备案材料</span>
                <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                    <IsImgPdf v-for="(item, index) in customsInformationImageList" :key="index"
                        v-if="customsInformationImageList.length" :url="item" />
                    <div v-if="!customsInformationImageList.length">
                        <IsImgPdf url="" />
                    </div>
                </div>
                <span class="tilte" v-if="detailInfo.tradeMode == '进口'">进口产品原材料检验检疫证明</span>
                <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                    <IsImgPdf v-for="(item, index) in customsInspectionImageList" :key="index"
                        v-if="customsInspectionImageList.length" :url="item" />
                    <div v-if="!customsInspectionImageList.length">
                        <IsImgPdf url="" />
                    </div>
                </div>
                <span class="tilte" v-if="detailInfo.tradeMode == '进口'">检测报告</span>
                <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                    <IsImgPdf v-for="(item, index) in customsTestReportImgaeList" :key="index"
                        v-if="customsTestReportImgaeList.length" :url="item" />
                    <div v-if="!customsTestReportImgaeList.length">
                        <IsImgPdf url="" />
                    </div>
                </div>
            </div>
            <div class="product_detail_title--heng"></div>
            <div class="product_detail_bottom" id="brand_qualification">
                <div class="product_detail_title-content-size">品牌资质</div>
                <div class="supplier_detail_content_div supplier_detail_content_divorder">
                    <div class="label">品牌名称</div>
                    <div class="value">{{ brandList.brandName }}</div>
                </div>
                <div class="supplier_detail_content_div supplier_detail_content_divorder">
                    <div class="label">品牌商标注册证</div>
                    <div class="value">
                        <IsImgPdf :url="brandList.brandImages" width="30" height="30" type="small" />
                    </div>
                </div>
                <div class="supplier_detail_content_div supplier_detail_content_divorder">
                    <div class="label">商标授权使用证明</div>
                    <div class="value">
                        <IsImgPdf :url="brandList.usageImages" width="30" height="30" type="small" />
                    </div>
                </div>
                <div class="supplier_detail_content_div supplier_detail_content_divorder">
                    <div class="label">使用授权品类</div>
                    <div class="value">
                        {{ brandList.usages }}
                    </div>
                </div>
                <div class="supplier_detail_content_div supplier_detail_content_divorder">
                    <div class="label">店铺销售授权</div>
                    <div class="value">
                        <IsImgPdf :url="brandList.sellImages" width="30" height="30" type="small" />
                    </div>
                </div>
                <div class="supplier_detail_content_div supplier_detail_content_divorder">
                    <div class="label">销售授权品类</div>
                    <div class="value">
                        {{ brandList.sells }}
                    </div>
                </div>
                <div class="supplier_detail_content_div supplier_detail_content_divorder">
                    <div class="label">其他补充资质</div>
                    <div class="value">
                        <IsImgPdf :url="brandList.otherImages" width="30" height="30" type="small" />
                    </div>
                </div>
                <div class="supplier_detail_content_div">
                    <div class="label">联名款/其他授权</div>
                    <div class="value">
                        <IsImgPdf :url="brandList.jointlyImages" width="30" height="30" type="small" />
                    </div>
                </div>
            </div>
            <!-- 回到顶部按钮 -->
            <div v-if="showToTopButton" class="back-to-top-button" @click="scrollToTop">
                <van-image :src="toTop" class="" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { anchor } from "@/utils/index";
import { getEnvValue } from "@/utils/index";
import {
    getSupplierAddProducts,
    listBrand
} from "@/api/productList/index";
import { getInfo, getbrandId, hmSupplierList } from "@/api/supplierList/index";
import { showImagePreview } from "vant";
import IsImgPdf from '@/components/isImgPdf/index.vue'
const route = useRoute();
const router = useRouter();
const detailInfo = ref<any>({});
const realSrcList = ref<string[]>([]);
const voucherImageList = ref<string[]>([]);
const customsDeclarationImageList = ref<string[]>([]);
const customsInformationImageList = ref<string[]>([]);
const customsInspectionImageList = ref<string[]>([]);
const customsTestReportImgaeList = ref<string[]>([]);
const otherImageList = ref<string[]>([]);

const ticketSwiper = ref();
const brandList = ref<any>({});

const showTop = ref(false);
// 机制
const hmMechanismsList = ref<any>({})
const hmMechanismsList1 = ref<any>({})
const hmMechanismsList2 = ref<any>({})
const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
const toTop = new URL("@/assets/porduct/icon_dingbu.png", import.meta.url).href;

const roleName = ref();

// 是否显示浮动导航栏
const showFloatingNav = ref(false);
const showToTopButton = ref(false);
const activeNavItem = ref("");
const scrollToElement = (elementId: string) => {
    const scrollDom: any = document.querySelector(".product_detail_scroll");
    const topDom: any = document.querySelector("#product_detail_top");
    let moveDom: any = null;
    let offset = 36; // 偏移量设定为36像素，可以根据需要调整

    switch (elementId) {
        case "product_detail_top":
            moveDom = topDom;
            break;
        case "product_detail_title--content":
            moveDom = document.querySelector("#product_detail_title--content");
            break;
        case "product_detail_bottom":
            moveDom = document.querySelector("#product_detail_bottom");
            break;
        case "brand_qualification":
            moveDom = document.querySelector("#brand_qualification");
            break;
        default:
            return; // 如果没有匹配的 elementId，直接返回
    }

    if (moveDom) {
        anchor(scrollDom, topDom, moveDom, "minus", offset);
    }
};
const scrollToTop = () => {
    const element = document.querySelector(".product_detail_scroll");
    let scrollTop = element ? element.scrollTop : 0;
    if (scrollTop > 0) {
        const timeTop = setInterval(() => {
            (element as Element).scrollTop = scrollTop -= 50;
            if (scrollTop <= 0) {
                clearInterval(timeTop);
            }
        }, 10);
    }
};
const checkScrollPosition = (event) => {
    // 滚动条距离顶部的距离
    const scrollTop = event?.target.scrollTop;
    // 元素内容的总高度
    const scrollHeight = event?.target.scrollHeight;
    // 元素在视口中的可见高度
    const clientHeight = event?.target.clientHeight;
    // 计算商品内容区域的位置
    const productTopOffset =
        document.getElementById("product_detail_top")?.offsetTop || 0;
    const contentBottomOffset = scrollHeight - clientHeight; // 内容区域底部位置


    // topOffsetHeight ==> 盒子高度   offsetTop ==> 盒子距离顶部距离
    const topOffsetHeight: any = (document.querySelector(".product_detail_top") as any).offsetHeight;
    const inventoryOffsetHeight: any = (document.querySelector(".product_detail_title--content") as any).offsetHeight;
    const cooperateOffsetHeight: any = (document.querySelector(".product_detail_bottom") as any).offsetHeight;
    // const productPhotographOffsetTop: any = (document.querySelector("#product_detail_title--productPhotograph") as any).offsetHeight;
    const heng: any = (document.querySelector(".product_detail_title--heng") as any).offsetHeight;


    const firstscoll = topOffsetHeight - 40
    const secondscoll = firstscoll + inventoryOffsetHeight + heng
    const thirdscoll = secondscoll + cooperateOffsetHeight + heng
    // const productPhotograph = thirdscoll + productPhotographOffsetTop + heng

    if (scrollTop >= contentBottomOffset - 2 && scrollTop <= contentBottomOffset + 2) {
        activeNavItem.value = "brand_qualification";
        return
    }
    // 判断滚动位置，设置活动导航项
    if (scrollTop >= 96 && scrollTop < firstscoll) {
        activeNavItem.value = "product_detail_top";
    } else if (scrollTop >= firstscoll && scrollTop < secondscoll) {
        activeNavItem.value = "product_detail_title--content";
    } else if (scrollTop >= secondscoll && scrollTop < thirdscoll) {
        activeNavItem.value = "product_detail_bottom";
    } else if (scrollTop >= thirdscoll && scrollTop < contentBottomOffset) {
        activeNavItem.value = "brand_qualification";
    }
    // 根据具体的滚动位置设定条件
    showFloatingNav.value = scrollTop > productTopOffset;
    showToTopButton.value = scrollTop > 100; // 显示回到顶部按钮条件，例如滚动超过100px
};

/** 图片放大 */
const enlargeImage = (index: number) => {
    showImagePreview({
        images: realSrcList.value,
        startPosition: index,
    });
};
/** 图片放大 */
const enlargeImages = (img: string) => {
    if (img) {
        showImagePreview({
            images: [img],
        });
    }
};
/** 商品id */
const uniquekey = computed(() => {
    return route.params.id;
});
/** 多图片并发请求更改 */
const fetchImagesSequentially = async (real_src: any, list: any) => {
    for (const item of real_src) {
        if (item) {
            const url = getEnvValue("VITE_APP_PIC_URL") + item
            list.push(url);
        }
    }
};
/** 获取详情 */
const getDetail = async () => {
    const res = await getSupplierAddProducts(uniquekey.value as any);
    detailInfo.value = res.data;
    if (res.data.hmMechanismsList.length) {
        hmMechanismsList.value = res.data.hmMechanismsList[0]
        hmMechanismsList1.value = res.data.hmMechanismsList[1]
        hmMechanismsList2.value = res.data.hmMechanismsList[2]
    }
    // 根据供应商id获取供应商详情
    const response = await hmSupplierList({ id: res.data.supplierId });
    if (response.rows[0] && response.rows[0].businessImage) {
        detailInfo.value.businessImage = getEnvValue("VITE_APP_PIC_URL") + response.rows[0].businessImage;
    }
    if (res.data.productImage) {
        const real_src = res.data.productImage.split(",");
        fetchImagesSequentially(real_src, realSrcList.value);
    }
    if (detailInfo.value.voucherImage) {
        const img1 = res.data.voucherImage.split(",");
        fetchImagesSequentially(img1, voucherImageList.value);
    }
    if (detailInfo.value.customsDeclarationImage) {
        const img2 = res.data.customsDeclarationImage.split(",");
        fetchImagesSequentially(img2, customsDeclarationImageList.value);
    }
    if (detailInfo.value.customsInformationImage) {
        const img3 = res.data.customsInformationImage.split(",");
        fetchImagesSequentially(img3, customsInformationImageList.value);
    }
    if (detailInfo.value.customsInspectionImage) {
        const img4 = res.data.customsInspectionImage.split(",");
        fetchImagesSequentially(img4, customsInspectionImageList.value);
    }
    if (detailInfo.value.customsTestReportImgae) {
        const img5 = res.data.customsTestReportImgae.split(",");
        fetchImagesSequentially(img5, customsTestReportImgaeList.value);
    }
    if (detailInfo.value.otherImage) {
        const img6 = res.data.otherImage.split(",");
        fetchImagesSequentially(img6, otherImageList.value);
    }

    await getListBrand(res.data.supplierId, res.data.brandName);
};
getDetail();
const getUser = async () => {
    const res = await getInfo();
    roleName.value = res.data.user.roles[0].roleName;
};
getUser();
/** 获取品牌信息 */
const getListBrand = async (supplierId: string, brandName: string) => {
    const res = await listBrand({ supplierId: supplierId });
    if (res.rows.length > 0) {
        const brandLists = res.rows.filter(
            (item: any) => item.brandName == brandName
        );
        if (brandLists.length > 0) {
            const brandInfo = await getbrandId(brandLists[0].id);
            // 品牌商标注册证
            if (brandInfo.data.brandImage) {
                brandInfo.data.brandImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.brandImage;
            }
            // 商标授权使用证明
            if (brandInfo.data.usageImage) {
                brandInfo.data.usageImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.usageImage;
            }
            // 店铺销售授权
            if (brandInfo.data.sellImage) {
                brandInfo.data.sellImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.sellImage;
            }
            // 其他补充资质
            if (brandInfo.data.otherImage) {
                brandInfo.data.otherImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.otherImage;
            }
            // 联名款/其他授权
            if (brandInfo.data.jointlyImage) {
                brandInfo.data.jointlyImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.jointlyImage;
            }
            brandList.value = brandInfo.data;
        }
    } else {
        brandList.value = [];
    }
};

/** 返回区分不同地址 */
const handleLeft = () => {
    router.back();
};
</script>
<style lang="less" scoped>
.button {
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    margin-top: 10px;

    .cancel {
        width: 162px;
        height: 44px;
        border-radius: 23px;
        border: 1px solid #1a1b1c;
        background-color: #fff;
        color: #000;
        font-size: 14px;
        color: #1a1b1c;
        line-height: 44px;
        text-align: center;
    }

    .save {
        width: 162px;
        height: 44px;
        background: #0094ff;
        border-radius: 23px;
        color: #ffffff;
        font-size: 14px;
        line-height: 44px;
        text-align: center;
    }
}

.product_list_serch {
    padding-top: 90px;
    width: 100%;
    height: 55px;
    position: relative;

    .product_list_serch_button {
        width: 60px;
        height: 32px;
        position: absolute;
        right: 11px;
        top: 100px;
    }
}

:deep(.van-search__field) {
    background-color: #fff;
    border-radius: 20px;
    padding-left: 15px;
    padding-right: 60px;
}

.launch_div {
    padding: 0px 10px 0 10px;
    box-sizing: border-box;
    padding-top: 90px;
}

.launch_title {
    font-size: 14px;
    color: #1a1b1c;
}

.pop_div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;

    .pop_div_out {
        width: 25%;
        min-width: 78px;
        display: flex;
        justify-content: center;
        height: 30px;
        border-radius: 15px;
        line-height: 30px;
        font-size: 14px;
        margin-bottom: 15px;
    }

    .pop_div_item {
        width: 78px;
        display: flex;
        justify-content: center;
        height: 30px;
        border-radius: 15px;
        line-height: 30px;
        font-size: 12px;
    }
}

.product_detail {
    width: 100%;
    height: calc(100vh - 44px);
    background-color: #f6faff;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    align-content: flex-start;

    .product_detail_scroll {
        overflow-y: scroll;
        height: 100%;
        width: 100%;
    }

    .right_pop {
        position: absolute;
        top: 90px;
        right: 0px;
        width: 77px;
        height: 88px;
        background: #f6faff;
        display: flex;
        flex-wrap: wrap;
        z-index: 1000;

        .right_pop_div {
            display: flex;
            font-size: 14px;
            color: #0094ff;
            align-items: center;
            width: 100%;
            justify-content: center;
        }
    }

    .red-text {
        color: #1a1b1c;
        /* 激活状态下字体变为红色 */
    }

    .floating-nav {
        position: fixed;
        top: 90px;
        display: flex;
        align-items: center;
        background-color: white;
        z-index: 999;
        width: 100%;
        height: 36px;
        align-content: center;
        color: #b8beca;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

        /* 其他样式，如宽度、边距、填充等 */
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 100%;

            /* 其他样式 */
            .floating-nav li {
                cursor: pointer;
                padding: 10px;
                /* 其他样式 */
            }
        }
    }

    .menu_cion {
        width: 14px;
        height: 14px;
        position: absolute;
        right: 15px;
    }

    .menu_cions {
        width: 14px;
        height: 14px;
        margin-right: 3px;
    }

    :deep(.van-nav-bar) {
        background-color: #1466ff;
        height: 46px !important;
        width: 100%;
        position: fixed !important;
    }

    :deep(.van-nav-bar__title) {
        color: #000;
    }

    :deep(.van-nav-bar__text) {
        color: #000;
    }

    :deep(.van-icon) {
        color: #000;
    }

    &_top {
        width: 98%;
        border-radius: 3px;
        height: 50%;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
        margin-top: 46px;

        &_img {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            img {
                width: 200px;
                height: 200px;
            }

            :deep(.van-swipe) {
                width: 200px;
                height: 200px;
            }

            :deep(.van-image) {
                width: 200px;
                height: 200px;
            }
        }

        &_details {
            width: 100%;
            margin-top: 20px;

            .info {
                vertical-align: bottom;
                display: flex;
                align-items: center;

                .price {
                    font-weight: 500;
                    font-size: 21px;
                    color: #fc2540;
                }

                .costPrice {
                    color: #a3a3a3;
                    font-size: 10px;
                    margin-left: 10px;
                }

                .commission {
                    color: #ff0000;
                    font-size: 13px;
                    margin-left: auto;
                }
            }

            .styleName {
                font-weight: 700;
                line-height: 28px;
                font-size: 18px;
                color: #1a1b1c;
                margin-top: 5px;
                margin-bottom: 5px;

                .liveStreamingMechanisms {
                    width: 66px;
                    height: 26px;
                    background: #0094FF;
                    border-radius: 13px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                    line-height: 26px;
                    text-align: center;
                    display: inline-block;
                }
            }

            .brand,
            .styleCode {
                font-weight: 400;
                font-size: 12px;
                color: #b8beca;
                margin-top: 5px;
                // color: #a3a3a3;
                // font-size: 13px;
                // line-height: 20px;
            }

            .brand_right {
                margin-left: 20px;
            }
        }

        .liveStreamingMechanism {
            color: #a3a3a3;
            font-size: 10px;
            margin-left: 10px;
        }
    }

    &_title {
        padding: 10px 15px 0px 15px;
        width: 100%;
        font-weight: 500;
        font-size: 16px;
        color: #1a1b1c;
    }

    &_bottom {
        width: 100%;
        border-radius: 3px;
        // height: calc(58vh - 85px);
        background-color: #fff;
        padding: 15px 15px 60px 12px;
        box-sizing: border-box;

        .supplier_detail_content_div {
            min-height: 45px;
            // height: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;

            .label {
                width: 115px;
            }

            .value {
                width: calc(100% - 115px);
                color: #b8beca;
                // text-align: right;
                display: flex;
                justify-content: flex-end;

                .van-image {
                    width: 30px;
                    height: 30px;
                }
            }
        }

        .supplier_detail_content_divorder {
            border-bottom: 1px solid #dddddd;
        }

        .tilte {
            display: inline-block;
            margin: 8px 0;
            font-weight: 400;
            font-size: 14px;
            color: #1a1b1c;
            padding-bottom: 5px;
        }

        .product_image {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            width: 100%;
            margin-left: -10px;
            // margin-left: 10%;
            flex-wrap: wrap;

            .product_image_div {
                // margin-right: 5px;
            }
        }

        .vouche_image {
            width: 80%;
            margin-left: 10%;
        }
    }

    .buttonStatus {
        width: 100%;
        height: 40px;
        position: fixed;
        bottom: 10px;
        display: flex;
        line-height: 40px;
    }

    :deep(.product_detail_top) {
        width: 100% !important;
        // width: 100%;
        // border: solid 1px black;
        // min-height: 570px;
        height: auto;
    }

    .product_detail_top_img {
        width: 340px;
        height: 340px;
    }

    .van-swipe-item {
        width: 340px !important;
        height: 340px !important;

        .van-image {
            width: 340px;
            height: 340px;
        }
    }

    .van-swipe {
        width: 340px;
        height: 340px;
    }

    .product_detail_top_details {
        // border: solid 1px black;
    }

    .deails-size {
        display: flex;
        // margin-top: 10px;
    }

    .styleCode {
        margin-left: auto;
        font-weight: 400;
        font-size: 12px;
        color: #b8beca;
    }

    .merchant-style {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .merchant-style-size {
        font-size: 12px;
        color: #b8beca;
        line-height: 12px;
        margin-top: 5px;
    }

    .merchant-style-btn {
        width: 66px;
        height: 26px;
        background: #e7fdee;
        border-radius: 13px;
        color: #19d11b;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 5px;
    }

    .launch {
        font-size: 12px;
        color: #0094ff;
        margin-top: 5px;
    }

    .merchant-style-btn1 {
        margin-left: 10px;
        width: 66px;
        height: 26px;
        background: #ebf4ff;
        border-radius: 13px;
        color: #0094ff;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product_detail_title--content {
        // display: flex;
        // border: solid 1px black;
        // width: 100%;
        background: #fff;
        padding: 15px;

        .mechanism_title {
            font-weight: 500;
            font-size: 14px;
            color: #0094FF;
            margin-top: 20px;
        }
    }

    .product_detail_title-content-size {
        font-weight: 500;
        font-size: 16px;
        color: #1a1b1c;
        display: flex;
        align-items: center;

        .product_detail_title_dis {
            display: flex;
            align-items: center;

            .name {
                font-size: 12px;
                margin: 5px;
            }
        }

        // border: solid 1px black;
        .auditStatus {
            font-size: 12px;
            border-radius: 2px;
            padding: 3px 13px 3px 13px;
            text-align: center;
            border-radius: 3px;
        }
    }

    .product_detail_title--heng {
        width: 100%;
        height: 7px;
        background: #f6faff;
    }

    .product_detail_title-content-info {
        margin-top: 20px;
        display: flex;
    }

    .product_detail_title-content-info-name {
        font-weight: 400;
        font-size: 14px;
        color: #1a1b1c;
        line-height: 14px;
        width: 100px;
    }

    .product_detail_title-content-info-content {
        flex: 1;
        min-width: 0;
        font-weight: 400;
        font-size: 14px;
        color: #b8beca;
        line-height: 14px;
        margin-left: auto;
        display: flex;
        justify-content: flex-end;
        word-break: break-all;
    }

    .product_image_div {
        // border: solid 1px black;
        // margin-left: 10px;
    }

    .vouche_image {
        // border: solid 1px black;
        width: 100%;
        margin-left: -10px;
    }

    .vouche_image-style {
        width: 90px;
        height: 90px;
        margin-left: 10px;
        // border: solid 1px black;
    }

    :deep(.van-nav-bar__text) {
        color: #0094ff !important;
    }

    .back-to-top-button {
        position: fixed;
        bottom: 60px;
        right: 60px;
        border: none;
        cursor: pointer;
        width: 40px;
        height: 40px;

        :deep(.van-image) {
            width: 40px;
            height: 40px;
        }
    }
}
</style>